<template>
  <view>
    <uni-card v-if="appointInfo" class="card" title="基础卡片" sub-title="副标题" extra="额外信息" padding="10px 15px"
      :thumbnail="avatar">
      <template v-slot:title>
        <uni-list>
          <text style="margin: 20px;">当前预约</text>

        </uni-list>
      </template>
      <image style="width: 100%;" :src="campus.img"></image>
      <view class="card_content">{{campus.name}}</view>
      <view class="card_content">{{appointInfo.building_name}}楼 {{appointInfo.classroom_name}}室
        {{appointInfo.seat_num}}座
      </view>
      <view class="card_content">{{appointInfo.end_time.slice(0,10)}}
        {{appointInfo.start_time.slice(11,16)}}-{{appointInfo.end_time.slice(11,16)}}
      </view>
      <view slot="actions" class="card-actions">

        <view class="card-actions-item" @click="signIn">
          <uni-icons type="checkmarkempty" size="22" color="#999"></uni-icons>
          <text class="card-actions-item-text">签到</text>
        </view>
        <view class="card-actions-item" @click="openCancel">
          <uni-icons type="trash" size="22" color="#999"></uni-icons>
          <text class="card-actions-item-text">取消预约</text>
        </view>
      </view>
    </uni-card>

    <view v-else>
      <uni-card>
        <view class="no_appoint">暂无预约</view>
      </uni-card>
      <view v-for="(item,index) in recommendList" :key="index">
        <uni-card :sub-title="item.campusObj.name+' '+item.building+'楼' "
          :title="item.classroom+'室'+' '+ item.seat_num+'座'" extra="系统推荐座位" @click="quickAppoint(item)"
          :thumbnail="item.campusObj.img">
          <view class="card-actions-item" style="width: 70px;" @click="signIn">
            <uni-icons type="calendar" size="22" color="#999"></uni-icons>
            <text class="card-actions-item-text">去预约</text>
          </view>
        </uni-card>
      </view>
    </view>



    <!-- 确认取消预约弹窗 -->
    <uni-popup ref="cancelDialog" type="dialog">
      <uni-popup-dialog :type="info" cancelText="关闭" confirmText="确定" title="取消预约" content="确定取消预约？"
        @confirm="dialogConfirm"></uni-popup-dialog>
    </uni-popup>




  </view>
</template>

<script>
  import {
    getUnCheck,
    postCheck,
    postCancelAppoint,
    getRecommend
  } from "@/api/home.js"
  export default {
    data() {
      return {
        appointInfo: {
          start_time: "",
          end_time: ""
        },
        recommendList: [],
        campus: null,
        isAppoint: true

      };
    },
    onShow() {
      this.getAppoint();
      this.getRecommend();
    },
    methods: {
      signIn() {
        var that = this;
        // 只允许通过相机扫码
        uni.scanCode({
          onlyFromCamera: true,
          success: function(res) {
            console.log('条码类型：' + res.scanType);
            console.log('条码内容：' + res.result);
            postCheck({
              appointment_id: that.appointInfo.appointment_id,
              seat_id: res.result
            }).then(res => {
              uni.showToast({
                title: "签到成功",
                icon: "none"
              })
              this.getAppoint();
              this.isAppoint = false;
            })

          }
        });


      },
      openCancel() {
        this.$refs.cancelDialog.open()
        this.isAppoint = false;

      },
      dialogConfirm() {
        postCancelAppoint({
          appointment_id: this.appointInfo.appointment_id
        }).then(res => {
          if (res.data.status == 200) {
            uni.showToast({
              title: '取消预约成功',
              icon: "none"
            })
            this.getAppoint();
          }
        })
        this.$refs.cancelDialog.close();

      },

      getAppoint() {
        getUnCheck({
          user_id: wx.getStorageSync("iseats_userInfo").user_id
        }).then(res => {
          this.appointInfo = res.data.data;
          if (this.appointInfo.campus)
            this.campus = wx.getStorageSync("iseats_campus").find(item => item.value == this.appointInfo.campus)
        })
      },
      quickAppoint(item) {
        let chooseDay = this.GetDateStr(0);
        uni.navigateTo({
          url: `/subpkg/buildDetail/buildDetail?classroom_id=${item.classroom_id}&chooseDay=${chooseDay}&classroom_name=${item.classroom}&seat_id=${item.seat_id}`
        })
      },
      GetDateStr(AddDayCount) {
        var dd = new Date();
        dd.setDate(dd.getDate() + AddDayCount); //获取AddDayCount天后的日期
        var y = dd.getFullYear();
        var m = dd.getMonth() + 1; //获取当前月份的日期
        if (m < 10) m = "0" + m;
        var d = dd.getDate();
        return y + "-" + m + "-" + d;
      },
      getRecommend() {
        getRecommend({
          user_id: wx.getStorageSync("iseats_userInfo").user_id
        }).then(res => {
          res.data.data.forEach(el => {
            el.campusObj = wx.getStorageSync("iseats_campus").find(item => item.value == el.campus);

          })
          this.recommendList = res.data.data;
        })
      }
    }
  }
</script>

<style lang="scss">
  .card_content {
    padding-top: 40rpx;
    font-size: 20px;
    color: #666;
  }

  .no_appoint {
    height: 30vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    color: #999;
  }

  .card-actions {
    font-size: 15px;
    padding: 0 50px;
    display: flex;
    height: 100rpx;
    justify-content: space-between;
    align-items: center;
    color: #666;
  }

  .card-actions-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
</style>